<template>
    <div class="wrapper" @click="update">
        <image :src="logo" class="logo"/>
        <text class="title">Hello {{target}}</text>
        <text class="greeting">The environment is ready!</text>
        <router-view/>
    </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        target: 'World',
        logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
      }
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

<style scoped>
    .wrapper {
        justify-content: center;
        align-items: center;
    }

    .title {
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 48px;
    }

    .logo {
        width: 424px;
        height: 200px;
    }

    .greeting {
        text-align: center;
        margin-top: 70px;
        font-size: 50px;
        color: #41B883;
    }

    .message {
        margin: 30px;
        font-size: 32px;
        color: #727272;
    }
</style>
